<template>
    <div class="header-top">
        <div class="ht-left">
            <!-- 左菜单收缩 -->
            <div class="hide-show">
                <el-icon :size="25" @click="handleClick"
                    :style="{ transform: isCollapse ? 'rotate(-180deg)' : 'rotate(0)' }">
                    <Fold />
                </el-icon>
            </div>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index/dashboard' }">{{ $t('首页') }}</el-breadcrumb-item>
                <template v-for="routeItem in route.matched.slice(1)" :key="routeItem.name">
                    <template v-if="routeItem.name != 'dashboard' && routeItem.name != 'home'">
                        <el-breadcrumb-item v-if="routeItem.meta.title">
                            {{ $t(routeItem.meta.title as string) }}
                        </el-breadcrumb-item>
                    </template>
                </template>
            </el-breadcrumb>
        </div>
        <div class="ht-right">
            <!-- 全屏 -->
            <span class="iconfont icon-screen-full" @click="handleScreenFull"></span>
            <!-- 组件放大缩小 -->
                <el-dropdown trigger="click">
                    <span class="iconfont icon-zitidaxiao"></span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleSize('large')">大号</el-dropdown-item>
                            <el-dropdown-item @click="handleSize('default')">默认</el-dropdown-item>
                            <el-dropdown-item @click="handleSize('small')">小号</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            <!-- 换肤 -->
            <span class="iconfont icon-huanfu"></span>
            <!-- 国际化 -->
            <el-dropdown trigger="click">
                <span
                    :class="language === 'zh' ? 'iconfont icon-zhongyingwenqiehuan-zhongwen' : 'iconfont icon-zhongyingwenqiehuan-yingwen'"
                    style="color:skyblue;"></span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleChangeLange('zh')">中文</el-dropdown-item>
                        <el-dropdown-item @click="handleChangeLange('en')">English</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- 个人信息 -->
            <el-dropdown trigger="click">
                
                <!-- <el-avatar :src="userInfo.userInfo.avatarUrl" :size="25" v-if=""/> -->
                <el-avatar :icon="UserFilled" :size="25" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleUserInfo(0)" :icon="UserFilled">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="handleUserInfo(1)" :icon="Edit">密码修改</el-dropdown-item>
                        <el-dropdown-item @click="handleUserInfo(2)" :icon="CloseBold">登出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Fold, UserFilled, Edit, CloseBold } from '@element-plus/icons-vue'
import screenfull from "screenfull";
import { useI18n } from 'vue-i18n'
import { useUserInfoStore } from '@/stores/userInfo'
import { useCounterStore } from '@/stores/counter';

//国际化切换
const { locale } = useI18n()
let language = ref('zh')
//菜单栏是否收缩
const isCollapse = ref(false)
//全局路由
const router = useRouter()
//当前路由
const route = useRoute()
//状态管理
const userInfo = useUserInfoStore()
const useCount = useCounterStore()
const emit = defineEmits<{
    (e: 'changeCollapse', isCollapse: boolean): void
}>()

//按钮取反
const handleClick = () => {
    isCollapse.value = !isCollapse.value
    emit('changeCollapse', isCollapse.value)
}
//全屏
const handleScreenFull = () => {
    screenfull.toggle();
}
//改变大小
const handleSize = (size: string) => {
    useCount.setComponentSize(size)
}
//将语言存在本地并改变页面语言
const handleChangeLange = (lange: string) => {
    // localStorage.setItem('my_locale', lange)
    useCount.setMyLocale(lange)
    language.value = lange
    locale.value = lange
}
//操作个人信息
const handleUserInfo = (code: number) => {
    switch (code) {
        //个人信息
        case 0:
            router.push('/index/userInfo')
            break;
        //密码修改
        case 1:
            router.push('/index/userPwd')
            break;
        //登出系统
        case 2:
            userInfo.loginOut(router)
            break;
        default:
            break;
    }
}
</script>
<style scoped lang="less">
.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    padding-left: 20px;
    overflow: hidden;
    .ht-left {
        display: flex;
        align-items: center;
        flex-shrink: 0;

    }

    .ht-right {
        flex-shrink: 0;

        span {
            margin-right: 20px;
            font-size: 25px;
        }

        span:hover {
            cursor: pointer;
            color:black;
        }
    }
}
.iconfont{
    color:#C0C4CC;
}
// .iconfont:hover{
//     color:black;
// }
.hide-show {
    margin-right: 20px;

    &>i {
        transition: all 0.5s;
    }
}
</style>